<template>
  <header>
    <span @click="$back"><van-icon name="arrow-left" color="#fff" size="18" /></span>
    <strong>{{ $t("language.My.column4") }}</strong>
    <span @click="$openPage('/kefu')"><img v-lazy="getImg('kefu.png')" alt="" /></span>
  </header>
  <main>
    <div class="btnleft">
      <span @click="initData(1)" :class="activeindex == 1 ? 'active' : ''">{{ $t('language.message.notice') }}</span>
      <span @click="initData(2)" :class="activeindex == 2 ? 'active' : ''">{{ $t('language.message.email') }}</span>
    </div>
    <dl v-if="emailList.mails.length != 0">
      <dd @click="openemail(item)" v-for="item in emailList.mails" :key="item.mailID"
        :class="item.mailStatus == 0 ? 'write' : ''">
        <img v-if="item.mailStatus == 0" src="@/assets/img/email-de.png" alt="">
        <img v-else src="@/assets/img/email-no.png" alt="">
        <strong>{{ $t('language.message.msgcontent') }}</strong>
        <span>{{ item.mailTime }}<br /></span>
      </dd>
    </dl>
    <div class="footer" v-else>
      <img src="@/assets/img/bg3.png" alt="" />
      <p>{{ $t('language.message.empty') }}</p>
    </div>
    <div class="email">
      <el-dialog width="90%" v-model="initVisible2" :show-close="false">
        <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
          <strong></strong>
          <h4>
            {{ $t("language.message.email") }}
          </h4>
          <span @click="initVisible2 = false">
            <el-icon color="#b5b6c8" size="16">
              <CloseBold />
            </el-icon>
          </span>
        </div>
        <div class="dialogmain">
          <span>{{ context.mailTitle }}</span>
          <p>{{ context.mailContent }}</p>
          <ul>
            <li>
              <img src="@/assets/img/mylrft.png" alt="">
              <i>{{ $dot(context.gifts.goodsList.split(':')[2]) }} </i>
            </li>
            <li><van-button @click="receive" class="confirm">{{ $t('language.message.receive') }}</van-button></li>
          </ul>
          <div class="bottom">
            <van-button @click="deleteEmail" class="delete">{{ $t('language.message.delete')
              }}</van-button>
            <div class="right">
              <span>{{ context.mailType == 0 ? $t('language.message.systemEmail') : $t('language.message.otherEmail') }}
              </span>
              <span>{{ context.mailTime }}</span>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </main>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, watch, reactive } from "vue";
import { useStore } from "vuex";
const { proxy } = getCurrentInstance();

let initVisible2 = ref(false)
let activeindex = ref(1);
const store = useStore();
const getImg = (url) => {
  return new URL(`../../../assets/img/${url}`, import.meta.url).href;
};




let info = JSON.parse(localStorage.getItem("info"));
let emailList = reactive({
  page: {
    pageIndex: 0,
    pageSize: 0,
    totalCount: 0
  },
  mails: []
})
let emailForm = reactive({
  id: info.gameID,
  pageIndex: 1,
  pageSize: 10
})

let noticeList = reactive({})
let noticeForm = reactive({
  id: info.gameID,
  pageIndex: 1,
  pageSize: 10
})
let loading = ref(false)
let initData = (index: number) => {
  activeindex.value = index
  loading.value = true
  ElLoading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'el-loading'
  })
  if (index == 1) {
    proxy
      .$post(`/Basic/v1.0/Application/Notice`, noticeForm)
      .then(({ data }) => {
        for (let key in data.data) {
          noticeList[key] = data.data[key]
        }

      }).finally(() => {
        loading.value = false
        ElLoading.service({
          lock: true,
          background: 'rgba(0, 0, 0, 0.7)',
          customClass: 'el-loading'
        }).close()
      });
  } else {
    proxy
      .$post(`/Basic/v1.0/Application/Email`, emailForm)
      .then(({ data }) => {
        for (let key in data.data) {
          emailList[key] = data.data[key]
        }
      }).finally(() => {
        loading.value = false
        ElLoading.service({
          lock: true,
          background: 'rgba(0, 0, 0, 0.7)',
          customClass: 'el-loading'
        }).close()
      });
  }
}
initData(activeindex.value)
//监视是否阅读
watch(() => initVisible2.value, (newval) => {
  if (newval) {
    if (context.mailStatus == 0) {
      isread(1)
    }

  } else {
    initData(activeindex.value)
  }
})
//阅读邮件
let isread = (types = 1) => {
  return proxy.$post("/Basic/v1.0/Application/Email/Update", {
    id: info.gameID,
    mailId: context.mailID,
    mailStatus: types
  })
}
//
// 接收奖励
let receive = () => {
  isread(2).then(() => {
    initVisible2.value = false
    store.dispatch('GetUserInfo', info).then(({ data }) => {
      store.commit('SET_COININFO', data.data.accounts)
      localStorage.setItem('coininfo', JSON.stringify(data.data.accounts))
    })
  })
}
//删除邮件
let deleteEmail = () => {
  ElLoading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.7)',
    customClass: 'el-loading'
  })
  isread(4).then(() => {
    initVisible2.value = false
  }).finally(() => {
    let time = setInterval(() => {
      ElLoading.service({
        lock: true,
        background: 'rgba(0, 0, 0, 0.7)',
        customClass: 'el-loading'
      }).close()
      clearInterval(time)
    }, 300)
  })
}
// 打开邮件
let context = reactive({
  gifts: { packageName: "", goodsDescribe: "", goodsList: "" },
  mailContent: "",
  mailID: 0,
  mailStatus: 0,
  mailTime: "",
  mailTitle: "",
  mailType: 0
})
let openemail = (item) => {
  initVisible2.value = true
  for (let key in item) {
    context[key] = item[key]
  }
}
</script>
<style lang="scss">
.email {


  .el-dialog {
    padding: 15px 25px !important;
    background-color: rgb(50, 53, 62) !important;
    border-radius: 10px !important;
  }

  .dialogmain {
    >span {
      width: 100%;
      display: block;
      color: #fff;
      font-size: 16px;
      text-align: center;
      margin: 20px 0;
    }

    p {
      text-indent: 2em;
      font-size: 13px;
      color: rgb(144, 150, 163);
      line-height: 18px;
    }

    ul {
      width: 100%;
      height: 40px;
      margin-top: 40px;
      border-bottom: 1px dashed rgb(144, 150, 163);
      padding-bottom: 15px;
      @include flex(row, space-between, center);

      li {
        @include flex(row, flex-start, center);

        img {
          width: 30px;
          margin-right: 5px;
        }

        i {
          font-style: normal;
          color: #fff;
          font-size: 14px;
        }
      }
    }

    .bottom {
      padding: 15px 0 40px 0;
      @include flex(row, space-between, center);

      .delete {
        display: block;
        height: 32px;
        border: 1px solid #0a906c;
        background-color: transparent;
        color: #fff !important;
        font-size: 14px;
        border-radius: 5px
      }

      :deep(.van-button__text) {
        color: #fff !important;
      }

      .right {
        @include flex(column, center, flex-end);

        span {
          color: rgb(144, 150, 163);
          font-size: 13px;
        }

        span:nth-child(2) {
          font-size: 14px;
        }
      }
    }


    .confirm {
      background: #0a906c;
      border: none;
      color: #fff;
      display: block;
      margin: 0;
      height: 32px;
      line-height: 32px;
      font-size: 12px !important;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin: 30px auto 20px;
    }

    .van-button {
      margin: 0;
    }

    :deep(.van-button__text) {
      font-size: 12px !important;
    }


  }

  .el-dialog__header {
    padding: 0 !important;
  }
}
</style>
<style scoped lang="scss">
#bigcloser {
  width: 100%;
  @include flex(row, flex-end, center);

  strong {
    display: block;
    width: 28px;
    height: 28px;
  }

  h4 {
    flex: 1;
    font-size: 18px;
    color: #fff;
    text-align: center;
  }

  span {
    display: block;
    width: 28px;
    height: 28px;
    @include flex(row, center, center);
    border: 2px solid #b5b6c8;
    border-radius: 16px;
  }
}

header {
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 0 20px;
  color: #fff;

  span {
    display: block;
    height: 28px;
    width: 28px;
    @include flex(row, center, center);
    line-height: 28px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

main {
  background-color: #1a1a1a;
  padding: 55px 20px 90px;
  width: 100%;
  min-height: 100vh;
  background-color: rgb(26, 26, 26);

  .btnleft {
    padding: 20px 0;

    span {
      padding: 0 15px;
      border-radius: 5px;
      text-align: center;
      font-size: 12px;
      padding: 7px 25px;
      border: 1px solid #0a906c;
      color: #0a906c;
    }

    span+span {
      margin-left: 20px;
    }

    .active {
      background: #0a906c;
      color: #fff;
    }
  }

  dl {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border-radius: 15px;
    border: 1px solid rgb(103, 103, 103);

    dd+dd {
      margin-top: 7px;
    }

    .write {
      span {
        color: rgb(162, 166, 178);
        text-align: center;
        font-size: 13px;
      }

      strong {
        color: #fff;
        flex: 1;
      }
    }

    dd {
      border: 1px solid rgb(103, 103, 103);
      @include flex(row, space-between, center);
      border-radius: 10px;
      padding: 10px;

      img {
        width: 25px;
        margin-right: 15px;
      }

      span {
        color: rgb(103, 103, 103);
        text-align: center;
        font-size: 13px;
      }

      strong {
        color: rgb(103, 103, 103);
        flex: 1;
      }

    }

    .active {
      strong {
        color: #fff;
      }
    }
  }

  .footer {
    height: 400px;
    @include flex(column, center, center);

    img {
      width: 165px;
      margin: 0 auto;
    }

    p {
      font-size: 16px;
      color: #b5bacb;
      margin-top: 20px;
    }
  }
}
</style>
